<template>
	<view class="tpl-friends with-navbar">
		<juhe-all></juhe-all>
		
		<view class="search-box">
			<text class="iconfont icon-close"></text>
			<input type="search" value="" placeholder="输入关键词来搜索" />
			<view class="btn">搜索</view>
		</view>

		<!-- 普通列表 -->
		<view class="ul with-have-no-mt">
			<view class="li-box" v-for="one of 10">
				<view class="li">
					<image
						src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3451594991,3197762328&fm=27&gp=0.jpg"
						class="icon"
						mode=""
					></image>
					<view class="name">标题</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
		};
	}
};
</script>

<style lang="scss" scoped="">
.tpl-friends {
	.ul{
		margin-top: 10upx
		
	}
	.ul .li-box .li .icon {
		border-radius: 8upx;
		height: 70upx;
		width: 70upx;
	}
	
	.search-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;
		position: fixed;
		left: 0;
		right: 0;
		// top: var(--status-bar-height);
		top: 0;
		font-size: $uni-font-size-sm;
		z-index: 100;
		padding-top:var(--status-bar-height);
		// #ifndef APP-PLUS
		padding-top:20upx;
		// #endif
		.icon-close{
			margin-right: 20upx
		}
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
		input {
			background-color: #eee;
			flex: 1;
			border-radius: 50upx;
			padding: 0 20upx;
			height: 60upx;
			line-height: 60upx;
			display: flex;
			align-items: center;
		}
	
		.btn {
			margin-left: 20upx;
			height: 60upx;
			line-height: 60upx;
		}
	}
}
</style>
